class HistoryBookNew extends Book {
    constructor() {
        super();
    }

    loadBook(bookContainerId, bookConfig) {
        Select(bookContainerId).innerHTML = '<div class="book-container"><div id ="book-thumbs"></div><div id="book-pages"></div></div>';
        this.bookThumbContainer = Select("#book-thumbs");
        this.bookPageContainer = Select("#book-pages");

        this.loadThumbs(bookConfig.thumbs);
        this.loadCatalog(bookConfig);

        var that = this;
        bookConfig.pages.forEach((page, index) => {
            var pageDiv = document.createElement("div");
            pageDiv.classList.add("book-pages-item");
            if (index == 0) {
                pageDiv.classList.add("book-pages-active");
                pageDiv.classList.add("book-pages-show");
            }
            pageDiv.dataset.pageNum = index;
            pageDiv.innerHTML = page.description;
            that.bookPageContainer.appendChild(pageDiv);
        });
    }

    loadThumbs(thumbsConfig) {
        var that = this;
        thumbsConfig.forEach((thumb, index) => {
            var thumbDiv = document.createElement("div");
            thumbDiv.innerHTML = thumb.description;
            thumbDiv.classList.add("book-thumbs-item");
            if (index == 0) {
                thumbDiv.classList.add("book-thumbs-active");
            }
            thumbDiv.dataset.index = i;
            thumbDiv.addEventListener("click", function (event) {
                if (that.currentPage == event.currentTarget.dataset.index) {
                    //控制页面显示或者隐藏
                    var bookPages = Select("#book-pages");
                    if (bookPages.classList.contains("book-pages-hide")) {
                        bookPages.classList.remove("book-pages-hide");
                    } else {
                        bookPages.classList.add("book-pages-hide");
                    }
                } else {
                    //显示页面
                    Select("#book-pages").classList.remove("book-pages-hide");
                    //切换页面
                    that.previousPage = that.currentPage;
                    that.currentPage = event.currentTarget.dataset.index;
                    var previousThumb = bookThumbs[that.previousPage];
                    //切换样式
                    previousThumb.classList.remove("book-thumbs-active");
                    thumbDiv = event.currentTarget;
                    thumbDiv.classList.add("book-thumbs-active");
                    //执行回调函数
                    if (that.onPageChanged) {
                        that.onPageChanged(that.currentPage, that.previousPage);
                    }
                }
            });
        });
    }


    loadCatalog(catalogConfig) {
        this.currentChapter = Select("#catalog-current");
        var dropdownMenu = Select("#catalog-dropdown-menu");
        catalogConfig.forEach((chapter, index) => {
            var chapterTitle = document.createElement("a");
            chapterTitle.textContent = chapter.title;
            chapterTitle.dataset.page = chapter.pageNum;
            chapterTitle.classList.add("dropdown-item");
            chapterTitle.classList.add("dropdown-item-chapter");
            chapterTitle.onclick = function () {
                // that.currentChapter.textContent = this.innerText;
                that.gotoPage(this.dataset.page);
            };
            dropdownMenu.appendChild(chapterTitle);

            var that = this;
            chapter.children.forEach(child => {
                var childChapterTitle = document.createElement("a");
                childChapterTitle.textContent = child.title;
                childChapterTitle.dataset.page = child.pageNum;
                childChapterTitle.classList.add("dropdown-item");
                childChapterTitle.classList.add("dropdown-item-chapter-child");
                childChapterTitle.onclick = function () {
                    // that.currentChapter.textContent = this.innerText;
                    that.gotoPage(this.dataset.page);
                };
                dropdownMenu.appendChild(childChapterTitle);
            });

            if (index < catalogConfig.length - 1) {
                var divider = document.createElement("div");
                divider.classList.add("dropdown-divider");
                dropdownMenu.appendChild(divider);
            }
        });
    }

    gotoPage(page) {
        
    }
}